<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/overview.css">
	<link rel="stylesheet" href="/scriptZIP/flatpickr.min.css">

	<title>首页</title>

	<style>
		/* 日历样式 */
		.echarts {
			width: 100% !important;
			height: 100% !important;
		}

		input[readonly] {
			display: none;
		}

		.flatpickr-calendar.inline,
		.flatpickr-rContainer,
		.flatpickr-days,
		.dayContainer {
			width: 100%;
		}

		.flatpickr-months {
			margin-top: -3px;
			padding-top: 35px;
			font-size: 18px;
		}

		.flatpickr-prev-month,
		.flatpickr-next-month {
			height: 60px !important;
			display: flex;
			align-items: center;
			padding: 10px 20px !important;
		}

		.flatpickr-innerContainer {
			margin-top: 30px;
		}

		.flatpickr-calendar.inline {
			font-size: 15px;
			height: 500px;
			width: 82%;
			margin: 0px auto;
		}

		.flatpickr-weekdays {
			font-size: 18px;
		}

		.flatpickr-day {
			font-size: 18px;
			height: 60px;
			line-height: 60px !important;
		}

		.flatpickr-calendar {
			box-shadow: none;
		}

		.dayContainer,
		.flatpickr-day {
			max-width: none;
		}

		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="head">
			<div class="head_mask" v-if="!active.school"><img src="/wechat//image/loading.gif" alt=""></i></div>
			<div class="head_top" v-cloak>
				<div class="head_item">
					<span>学校总数</span>
					<div><span class="font">{{count.school || 0}}</span>&nbsp;家</div>
					<div>
						<a href="school.html?active=true">
							<span class="back">半年内有考勤:</span><span class="font">{{active.school|| 0}}</span>&nbsp;家
						</a>
					</div>
					<div>
						<a href="school.html?active=false">
							<span class="back">半年内无考勤:</span>
							<span class="font">{{count.school-active.school|| 0}}</span>&nbsp;家
						</a>
					</div>
				</div>
				<div class="head_item">
					<span>设备总数</span>
					<div><span class="font">{{count.device || 0}}</span>&nbsp;台</div>
					<div>
						<a href="device.html?active=true"><span class="back">半年内有考勤:</span>
							<span class="font">{{active.device || 0}}</span>&nbsp;台
						</a>
					</div>
					<div>
						<a href="device.html?active=false">
							<span class="back">半年内无考勤:</span>
							<span class="font">{{count.device-active.device || 0}}</span>&nbsp;台
						</a>
					</div>
				</div>
				<div class="head_item">
					<span>教师总数</span>
					<div><span class="font">{{count.teacher || 0}}</span>&nbsp;位</div>
					<div><span class="back">半年内有考勤:</span><span class="font">{{active.teacher || 0}}</span>&nbsp;位</div>
					<div>
						<span class="back">半年内无考勤:</span>
						<span class="font">{{count.teacher-active.teacher || 0}}</span>&nbsp;位
					</div>
				</div>
				<div class="head_item">
					<span>学生考勤</span>
					<div><span class="font">{{count.student || 0}}</span>&nbsp;位</div>
					<div><span class="back">半年内有考勤:</span><span class="font">{{active.student || 0}}</span>&nbsp;名</div>
					<div>
						<span class="back">半年内无考勤:</span>
						<span class="font">{{count.student-active.student || 0}}</span>&nbsp;名
					</div>
				</div>
				<div class="head_item">
					<span>考勤记录</span>
					<div><span class="font">{{count.attendance || 0}}</span>&nbsp;次</div>
					<div><span class="back">已绑卡数:</span><span class="font">{{count.card || 0}}</span>&nbsp;张</div>
					<div>
						<span class="back">未绑卡数:</span>
						<span class="font">{{active.card-count.card || 0}}</span>&nbsp;张
					</div>
				</div>
			</div>
			<div class="hr"></div>
		</div>
		<div class="content">
			<!-- 图表 -->
			<div class="content_left">
				<div class="line" id="main1" style="width: 98%;height: 330px;">
					<v-chart :option="option1" />
				</div>
				<div class="chart_box">
					<div class="bar">
						<div class="echart_div">
							学校数量信息展示
						</div>
						<div id="main3" style="width: 100%;height: 330px;">
							<v-chart :option="option3" />
						</div>
					</div>
					<div class="pie">
						<div class="echart_div">
							设备展示
						</div>
						<div id="main3" style="width: 100%;height: 330px;">
							<v-chart :option="option4" />
						</div>
					</div>
				</div>
			</div>
			<!-- 日历 -->
			<div class="content_right">
				<div class="riqi">
					<flat-pickr name="date" v-model="date" :config="{inline:true,locale:'zh'}"></flat-pickr>
					<div style="background: #2196f3;height: 4.5rem;line-height: 4.5rem; text-align: center;border-radius: 50px;width: 80%;margin: 80px auto 0px auto;"
						v-cloak>
						<label style="font-size: 22px;vertical-align:middle;line-height: 3.5rem;color: #ffffff;">
							当日考勤次数 {{attendanceCount}}人
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- <script src="https://cdn.w7.cc/ued/console/jssdkv2.js"></script> -->

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/echarts.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/index.umd.min.js"></script>
	<script src="/scriptZIP/flatpickr.min.js"></script>
	<script src="/scriptZIP/zh.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/vue-flatpickr.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		Vue.component('v-chart', VueECharts);
		Vue.component('flat-pickr', VueFlatpickr);

		var xs = [];
		for (var i = 27; i >= 0; i--)
			xs.push(dayjs().subtract(i, 'day').date());

		new Vue({
			el: '#app',
			data: {
				devices: [0, 0, 0, 0, 0, 0, 0, 0],
				schools: [0, 0, 0, 0, 0],
				date: dayjs().format('YYYY-MM-DD'),

				data1: xs,
				data2: xs,

				attendanceCount: 0,

				agentId: null,
				count: {},
				active: {},
				code: ""
			},
			created: function () {
				var param = {};
				try {
					// 可能会报错的代码
					if (/agent/.test(top.location.href)) {
						this.agentId = top_params().id;
						param = { params: { agentId: this.agentId } };
					}
				} catch (error) {
					// 错误处理代码
					console.log(error); // 输出错误信息
				}
				axios.get('/pc/home', param).then(function (res) {
					axios.get('/pc/home/active', param).then(function (res1) {
						this.count = res.data;
						this.active = res1.data;
					}.bind(this));
				}.bind(this));
				axios.get('/pc/home/device', param).then(function (res) {
					this.devices = res.data;
				}.bind(this));

				axios.get('/pc/home/school', param).then(function (res) {
					this.schools = res.data;
				}.bind(this));

				axios.get('/pc/home/attendance', param).then(function (res) {
					this.attendanceCount = res.data;
				}.bind(this));

				axios.get('/pc/home/attendance/recent', param).then(function (res) {
					var data = res.data;
					this.data2 = this.data1.map(function (it) {
						return data[it] || 0;
					});
				}.bind(this));

			},
			methods: {

			},
			watch: {
				date: function (nv, ov) {
					axios.get('/pc/home/attendance', {
						params: { date: nv, agentId: this.agentId }
					}).then(function (res) {
						this.attendanceCount = res.data;
					}.bind(this));
				}
			},
			computed: {
				option1: function () {
					var colors = ['#5793f3', '#d14a61', '#675bba'];
					return {
						color: colors,

						tooltip: {
							trigger: 'none',
							axisPointer: {
								type: 'cross'
							}
						},
						title: {
							show: true,
							text: '最近每天考勤数量统计曲线图',
							x: 'center',
						},
						grid: {
							top: 70,
							bottom: 50
						},
						xAxis: [
							{
								type: 'category',
								axisTick: {
									alignWithLabel: true
								},
								axisLine: {
									onZero: false,
									lineStyle: {
										color: colors[1]
									}
								},
								axisPointer: {
									label: {
										formatter: function (params) {
											return params.value + '号考勤次数：' + params.seriesData[0].data;
										}
									}
								},
								data: this.data1,
							}, {
								type: 'category',
								axisTick: {
									alignWithLabel: true
								},
								axisLine: {
									onZero: false,
									lineStyle: {
										color: colors[0]
									}
								},
							}
						],
						yAxis: [
							{
								type: 'value'
							}
						],
						series: [
							{
								name: '数据统计曲线图',
								type: 'line',
								smooth: true,
								data: this.data2,
							}
						]
					};
				},
				option3: function () {
					var list = '幼儿园,小学,中学,培训机构,其他'.split(',');

					return {
						xAxis: {
							show: true,/*x轴*/
							type: 'category',
							data: list
						},
						yAxis: {
							// show: false,/*关闭y轴*/
							type: "value",
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c}'
						},
						legend: {
							show: true,
							left: 'center',
							bottom: 50,
							data: list
						},
						series: [
							{
								name: '学校数量',
								type: 'bar',
								radius: '55%',/*图谱大小*/
								center: ['50%', '45%'],/*xy水平方位*/
								label: {
									show: true,
									position: 'top'
								},
								itemStyle: {
									normal: {
										color: function (params) {
											var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3', '#f47e39'];/*设置颜色*/
											return colorList[params.dataIndex];
										}
									},
								},
								data: list.map(function (it, i) {
									return { name: it, value: this.schools[i] };
								}.bind(this)),
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

				},
				option4: function () {

					var list = '打卡,人脸识别,人脸识别测温,闸机,校车,分班播报机,访客机,放学播报机'.split(',');
					console.log(list,'sdf');
					return {
						xAxis: {
							show: false,/*x轴*/
							type: 'category',
							data: list
						},
						yAxis: {
							show: false,
							type: "value",
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							/*是否显示图例 图谱位置 显示内容对应*/
							show: false,
							left: 'center',
							bottom: 50,
							data: list
						},
						series: [
							{
								name: '设备数量',
								type: 'pie',
								radius: '70%',/*图谱大小*/
								center: ['50%', '53%'],/*xy水平方位*/
								minAngle: 10,/*每块扇形最小占比*/
								label: {
									show: true,
									position: 'outside',//显示视觉引导线
								},
								labelLine: { //设置引导线长度
									show: true,
									length: 15,
									length2: 9,
									lineStyle: {
										// color: '#5793F3',
										width: 1,
										type: 'solid'
									}
								},
								data: list.map(function (it, i) {
									return { name: it, value: this.devices[i] };
								}.bind(this)),
								itemStyle: {
									normal: {
										color: function (params) {
											var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3', '#f47e39', '#934855', '#158968'];
											return colorList[params.dataIndex];
										}
									},
								},
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

				},

			}
		})
	</script>
</body>

</html>